<template>
    <div style="height:100%">
        <el-container style="height:100vh;border:0px solid #eee">

            <!-- 左侧 -->
            <el-aside width="15%" style="background-color: #eee ;height:100%">
                <el-menu :default-openeds="['1']" background-color="#545c64" text-color="#fff" style="height: 100%;">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message" style="color: #eee;"></i>老人信息管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="1-1">
                                <router-link :to="{path:'/indexPage',query: {managerid: this.ManagerId}}"
                                    style="text-decoration: none;color: #eee;">
                                    查看老人
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link :to="{path:'/evaluate',query: {loginUserId: this.ManagerId}}" style="text-decoration: none;color: #eee;">
                                    老人评估
                                </router-link>
                            </el-menu-item>
                            <el-menu-item index="1-3">
                                <router-link :to="{path:'/voluntary',query: {managerid: this.ManagerId}}"
                                    style="text-decoration: none;color: #eee;">
                                    待处理信息
                                </router-link>
                            </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link :to="{path:'/managerset',query: {managerid: this.ManagerId}}"
                                style="text-decoration: none;color: #eee;">
                                管理信息设置
                            </router-link></span>
                    </el-menu-item>
                </el-menu>
            </el-aside>


            <el-container>
                <!-- 头部 -->
                <el-header class="header_top">
                    <div class="header_mid">智慧养老辅助系统</div>

                </el-header>
                <!-- 中间 -->
                <el-main>

                    <el-row>
                        <el-col :span="3" style="margin-bottom: 2%;">
                            <router-link to="/loginPage" style="text-decoration: none;color: #000000;">
                                退出登录
                            </router-link>
                        </el-col>
                        <el-col :span="3" :offset="18" style="margin-bottom: 2%;">
                            <el-button type="primary" @click="dialogAddOdmVisible = true">添加老人</el-button>
                        </el-col>
                    </el-row>
                    <!-- 中心表格 -->
                    <el-table :data="tableData" style="width: 100%;" :row-class-name="tableRowClassName">
                        <el-table-column prop="id" label="序号" align="center" width="80px">
                        </el-table-column>
                        <el-table-column prop="name" label="姓名" align="center" width="100px">
                        </el-table-column>
                        <el-table-column prop="age" label="年龄(岁)" align="center" width="80px">
                        </el-table-column>
                        <el-table-column label="性别" align="center" width="60px">
                            <template slot-scope="scope">
                                {{scope.row.gender == '1' ? '男':'女'}}
                            </template>
                        </el-table-column>
                        <el-table-column prop="temperature" label="体温(℃)" align="center" width="80px">
                        </el-table-column>
                        <el-table-column prop="bloodpressure" label="血压(Bp)" align="center" width="80px">
                        </el-table-column>
                        <el-table-column prop="heartrate" label="心率(次/分)" align="center" width="100px">
                        </el-table-column>
                        <el-table-column prop="state" label="状态" align="center" width="60px">
                            <template slot-scope="scope">
                                <span :class="scope.row.state === '异常' ? 'red' : ''">{{ scope.row.state }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="evaluate" label="评测" align="center">
                        </el-table-column>
                        <el-table-column prop="disease" label="心血管疾病概率" align="center" width="120px">
                        </el-table-column>
                        <el-table-column label="操作" align="center">
                            <!-- 用插槽的方式获得数据 -->
                            <template #default="scope">
                                <el-button type="primary" @click="openAlterDialog(scope.row.id)">修改</el-button>
                                <el-button @click="deleteOldMan(scope.row.id)" type="danger">删除</el-button>
                            </template>

                        </el-table-column>
                    </el-table>
                    <br>
                </el-main>
            </el-container>
        </el-container>

        <!-- 修改的弹窗 -->
        <el-dialog title="修改信息" :visible.sync="dialogAlOdmVisible">
            <el-form :model="updateOldManInfo">
                <el-form-item label="名字">
                    <el-input v-model="updateOldManInfo.name" autocomplete="off"
                        placeholder="名字"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="updateOldManInfo.age" autocomplete="off" 
                        placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="UpdateValue" placeholder="性别" >
                        <el-option v-for="item in UpdateOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="体温（摄氏度）">
                    <el-input v-model="updateOldManInfo.temperature" autocomplete="off" 
                        placeholder="体温（摄氏度）"></el-input>
                </el-form-item>
                <el-form-item label="血压（mmHg）">
                    <el-input v-model="updateOldManInfo.bloodpressure" autocomplete="off" 
                        placeholder="血压（mmHg）"></el-input>
                </el-form-item>
                <el-form-item label="心率（次/分）">
                    <el-input v-model="updateOldManInfo.heartrate" autocomplete="off" 
                        placeholder="心率（次/分）"></el-input>
                </el-form-item>
                <el-form-item label="总胆固醇水平(180-300mg/dl)">
                    <el-input v-model="updateOldManInfo.totalCho" autocomplete="off" 
                        placeholder="总胆固醇水平"></el-input>
                </el-form-item>
                <el-form-item label="高密度脂蛋白胆固醇水平(40-60mg/dl)">
                    <el-input v-model="updateOldManInfo.hdlcho" autocomplete="off" 
                        placeholder="高密度脂蛋白胆固醇水平"></el-input>
                </el-form-item>
                <el-form-item label="吸烟情况(0为无，其他为有)">
                    <el-input v-model="updateOldManInfo.smoking" autocomplete="off" 
                        placeholder="吸烟情况"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAlOdmVisible = false">取 消</el-button>
                <el-button type="primary" @click="alterOldMan()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 添加的弹窗 -->
        <el-dialog title="添加老人" :visible.sync="dialogAddOdmVisible">
            <el-form :model="inputOldManInfo">
                <el-input v-model="inputOldManInfo.name" autocomplete="off" placeholder="名字"
                    style="margin-bottom: 2%;"></el-input>
                <el-input v-model="inputOldManInfo.age" autocomplete="off" placeholder="年龄"
                    style="margin-bottom: 2%;"></el-input>
                <el-select v-model="value" placeholder="请选择" style="margin-bottom: 2%;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddOdmVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOldMan()">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>


<script>
    import axios from 'axios';
    export default {
        data() {
            return {
                tableData: [],
                dialogAlOdmVisible: false,
                inputOldManInfo: [{
                    "name": "",
                    "age": 0,
                    "gender": ""
                }],
                updateOldManInfo: {
                    "id": 0,
                    "name": "",
                    "age": 0,
                    "gender": "",
                    "temperature": "",
                    "bloodpressure": "",
                    "heartrate": "",
                    "totalCho":"",
                    "hdlcho":"",
                    "smoking":"" 
                },
                dialogAddOdmVisible: false,
                options: [{
                    value: "男",
                    label: "男"
                },
                {
                    value: "女",
                    label: "女"
                }],
                UpdateOptions: [{
                    value: "男",
                    label: "男"
                },
                {
                    value: "女",
                    label: "女"
                }],
                value: '',
                UpdateValue: "",
                UpdateDialogInfo: [],
                ManagerId: 0
            }
        },
        methods: {
            tableRowClassName: function ({ row }) {
                console.log(row)
                if (row.state === '异常') {
                    return 'warning-row';
                }
                return '';
            },
            onSubmit: function () {
                alert("查询")
            },
            handleSizeChange: function (val) {
                alert("页码变换" + val);
            },
            handleCurrentChange: function (val) {
                alert("页码变换" + val);
            },
            deleteOldMan: function (val) {
                axios.delete("http://localhost:8080/oldMan/" + val).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/oldMan").then((result) => {
                            this.tableData = result.data.data;
                        })
                    }
                });
            },
            addOldMan: function () {
                this.inputOldManInfo.gender = this.value;
                var realInfo = {
                    "name": "",
                    "age": 0,
                    "gender": "",
                    "managerid": 0
                }
                realInfo.name = this.inputOldManInfo.name;
                realInfo.age = this.inputOldManInfo.age;
                realInfo.gender = this.inputOldManInfo.gender;
                realInfo.managerid = this.ManagerId;

                this.dialogAddOdmVisible = false;

                axios.post("http://localhost:8080/oldMan", realInfo).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/GetByManagerId/" + this.ManagerId).then((result) => {
                            this.tableData = result.data.data;
                        });
                    }
                });
            },
            openAlterDialog: function (val) {
                this.dialogAlOdmVisible = true;
                axios.get("http://localhost:8080/GetById/" + val).then((result) => {
                    this.updateOldManInfo = result.data.data;
                });
                this.updateOldManInfo.id = val;


            },
            alterOldMan: function () {
                this.dialogAlOdmVisible = false;
                var realAlterInfo = {
                    "id": 0,
                    "name": "",
                    "age": 0,
                    "gender": "",
                    "temperature": "",
                    "bloodpressure": "",
                    "heartrate": "",
                    "totalCho":"",
                    "hdlcho":"",
                    "smoking":"" 
                }
                realAlterInfo = this.updateOldManInfo;
                realAlterInfo.gender = this.UpdateValue;
                axios.put("http://localhost:8080/oldMan/" + realAlterInfo.id, realAlterInfo).then((result) => {
                    if (result.data.code == 1) {
                        axios.get("http://localhost:8080/GetByManagerId/" + this.ManagerId).then((result) => {
                            this.tableData = result.data.data;
                        });
                    }
                })
            },
            refresh: function () {

            }
        },
        mounted() {
            // 发布异步请求
            axios.get("http://localhost:8080/GetByManagerId/" + this.$route.query.loginUserId).then((result) => {
                this.ManagerId = this.$route.query.loginUserId;
                this.tableData = result.data.data;
            });

        }
    };
</script>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .header_top {
        padding: 0;
    }

    .header_mid {
        font-size: 40px;
        background-color: rgba(189, 190, 190, 0.307);
    }

    .red {
        color: red;
    }

    .el-table .warning-row {
        background: rgb(253, 226, 226);
    }
</style>

<style>

</style>